<template>
  <div id="lineMain"></div>
</template>

<script lang='ts' setup>
import {reactive, ref, onBeforeMount, onMounted} from 'vue'
import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;
import {useCommon} from '@/hooks/web/useCommon'

var option: EChartsOption;
const {throttle, createFigure, chartRef} = useCommon()
onMounted(() => {
  chartRef.value = 'lineMain'
  window.addEventListener("resize", throttle(createFigure, 500));
  getChartsData()
})

const getChartsData = () => {

  var chartDom = document.getElementById('lineMain')!;
  var myChart = echarts.init(chartDom, 'light');
  var option: EChartsOption;

  option = {
    title: {
      text: '每月销售额'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ["王丽", "孔德坤", "张军委"],
    },
    grid: {
      left: '1%',
      right: '1%',
      bottom: '1%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '王丽',
        type: 'line',
        stack: 'Total',
        label: {
          show: true,
          position: "top",
        },
        data: [160, 132, 101, 134, 345, 230, 210]
      },
      {
        name: '孔德坤',
        type: 'line',
        stack: 'Total',
        label: {
          show: true,
          position: "top",

        },
        data: [300, 232, 121, 233, 467, 330, 110]
      },
      {
        name: '张军委',
        type: 'line',
        stack: 'Total',
        label: {
          show: true,
          position: "top",
        },
        data: [620, 162, 320, 534, 180, 430, 510]
      },
    ]
  };

  option && myChart.setOption(option);
}

</script>
<style scoped>
#lineMain {
  width: 100%;
  height: 300px;
}
</style>